<script setup>
import {
  AllReadAPI,
  GetMessageAPI,
  GetAuditListAPI,
  GetNoticeListAPI,
  GetMenuAPI,
  AddShortcutsAPI,
  GetShortcutsAPI,
  GetNoMessageAPI
} from '@/api/layout.js'
import pTable from '@/components/table/index'

import { computed, reactive, watch } from 'vue'

import { useRouter } from 'vue-router'

import textScrool from '@/components/textScrool/index'

import useUserStore from '@/store/modules/user'

import MessageInfo from '@/components/message/index'

const { proxy } = getCurrentInstance()

const router = useRouter()

const useUser = useUserStore()

const msgIsShow = computed(() => useUser.msgIsShow)

const query = reactive({
  pageNum: 1,
  pageSize: 9999999,
  readMark: 2
})

// 状态
const state = reactive({
  shortcutsShow: false, // 快捷功能弹窗状态
  btnloading: false, // 快捷功能提交按钮加载状态
  auditAgentLoading: false, // 审核代办列表加载状态
  msgLoading: false,
  disabled: false
})

// 快捷列表
const pageList = ref([])

const shortcutsList = ref([])

const idStr = ref([])

// 公告数据
const notice = ref([])

// 审核代办
const auditAgentData = ref([])

// 审核待办条数
const remaining = ref(0)

// 消息提醒
const messageData = ref([])

// 审核代办枚举
const column = ref([
  {
    label: '单据名称',
    prop: 'receiptName'
  },
  {
    label: '单据号',
    prop: 'receiptNumber'
  },
  {
    label: '状态',
    prop: 'statusDict'
  },
  {
    label: '内容',
    showText: true,
    prop: 'receiptContent'
  },
  {
    label: '操作',
    prop: 'x'
  }
])

// 消息中心表格数据
const tableData = ref([])

// 审核中心熟料
const total = ref(0)

// 消息数量
const totalMsg = ref(0)

//  消息中心
const messageColumn = ref([
  {
    label: '消息类型',
    prop: 'messageTypeDict'
  },
  {
    label: '保质期内容',
    prop: 'messageContent',
    width: '600px'
  },
  {
    label: '告警时间',
    prop: 'warnTime'
  },

  {
    label: '操作',
    width: '200px',
    prop: 'x'
  }
])

// 快捷功能弹窗
const shortcutsAdd = () => {
  getMenuList()
  getShortcuts()
  state.shortcutsShow = true
}

// 快捷功能提交
const shortcutsSub = async () => {
  if (state.disabled) return proxy.warningMsg('最多选择10条！')
  state.btnloading = true
  try {
    await AddShortcutsAPI({
      idStr: idStr.value
    })
    proxy.successMsg('切换成功！')
    getShortcuts()
    state.shortcutsShow = false
  } catch {
  } finally {
    state.btnloading = false
  }
}

// 已读
const read = async val => {
  if (val.readMark == 2) {
    await AllReadAPI({ id: val.id })
    val.readMark = 1
    router.push('/approval/daiban')
  }
}

// 全部已读
const allRead = async () => {
  await AllReadAPI({ id: '' })
  messageData.value = []
  getMessage()
}

// 右侧改变时
const rightPageChange = val => {
  if (val.length > 10) {
    state.disabled = true
  } else {
    state.disabled = false
  }
}

// 获取快捷列表
const getShortcuts = async () => {
  const { data: result } = await GetShortcutsAPI()
  shortcutsList.value = result
  idStr.value = result.map(t => t.menuId)
}

// 获取页面列表
const getMenuList = async () => {
  const { data: result } = await GetMenuAPI()
  pageList.value = result
}

// 弹窗关闭时
const colse = () => {
  idStr.value = []
  state.shortcutsShow = false
}

// 获取审核代办列表
const getAuditAgentData = async () => {
  // query.pageNum++
  if (auditAgentData.value.length > total.value) {
    return
  }
  state.auditAgentLoading = true
  try {
    const result = await GetAuditListAPI(query)
    auditAgentData.value = result.rows
    total.value = result.total
  } catch {
  } finally {
    state.auditAgentLoading = false
  }
}

// 获取公告列表 *-*-*-*
const getNoticeList = async () => {
  try {
    const result = await GetNoticeListAPI({ pageNum: 1, pageSize: 9999, status: 0 })
    notice.value = result.rows.map(t => t.noticeContent)
  } catch {
  } finally {
  }
}

const queryMsg = reactive({
  pageNum: 1,
  pageSize: 9999999
})

const loadingChange = val => {
  queryMsg.pageNum++
  if (messageData.value.length > totalMsg.value) return
  // getMessage()
}

// 获取消息提醒列表
const getMessage = async () => {
  state.msgLoading = true
  try {
    const result = await GetMessageAPI(queryMsg)
    messageData.value = result.rows

    totalMsg.value = result.total
    useUser.setMsgTotal()
  } catch {
  } finally {
    state.msgLoading = false
  }
  useUser.setMsgTotal()
}

getNoticeList()
getMenuList()
getShortcuts()
getAuditAgentData()
getMessage()
const msgTotal = computed(() => {
  const arr = messageData.value.filter(t => t.readMark == 2)
  if (arr?.length > 0) {
    return arr.length
  } else {
    return 0
  }
})

const auditAgentTotal = computed(() => {
  const arr = auditAgentData.value.filter(t => t.status != 3)
  if (arr?.length > 0) {
    return arr.length
  } else {
    return 0
  }
})

watch(
  () => useUser.msgTotal,
  () => {
    getMessage()
    useUser.setMsgTotal()
  },
  {
    deep: true
  }
)

watch(
  () => useUser.socket,
  val => {
    console.log(val)
    if (val > 0) {
      auditAgentData.value = []
      messageData.value = []
      getAuditAgentData()
      getMessage()
      useUser.setMsgTotal()
    }
  },
  {
    deep: true
  }
)

const filterMethod = (query, item) => {
  return item.menuName.toLowerCase().includes(query.toLowerCase())
}
</script>
<template>
  <div class="app-container">
    <textScrool :sliderText="notice" />
    <el-card class="mt20">
      <template #header>
        <div class="card-header flex-items-center">
          <div class="flex-items-center">
            <el-icon color="#006CB6" size="20px" class="cup mr10" @click="shortcutsAdd"><Setting /></el-icon>
            <span class="title">快捷功能</span>
          </div>
          <el-button class="indexBtn" text @click="shortcutsAdd">设置</el-button>
        </div>
      </template>
      <!-- 快捷功能列表-->
      <div class="box">
        <div class="box-item" v-for="item in shortcutsList" :key="item.id" @click="router.push(item.menuUrl)">
          <svg-icon :class-name="item.icon" color="#006CB6" size="40px" />
          <div class="box-item-title">{{ item.menuName }}</div>
        </div>
        <div v-if="!shortcutsList.length > 0" class="box-item" @click="shortcutsAdd">
          <svg-icon class-name="item.icon" color="#006CB6" size="40px" />
          <div class="box-item-title">点击添加快捷入口！</div>
        </div>
      </div>
    </el-card>
    <div class="mt20 flex tableBox">
      <div style="flex: 1">
        <!-- 审核代办-->
        <el-card style="height: 35.5rem">
          <template #header>
            <div class="card-header flex-items-center">
              <div class="flex-items-center">
                <svg-icon class="mr10" class-name="shenpidaiban" color="#009fff" size="20px" />
                <span class="title">审核代办</span>
                <span class="total">({{ auditAgentTotal }})</span>
              </div>
              <el-button class="indexBtn" text @click="router.push('/approval/daiban')">更多</el-button>
            </div>
          </template>
          <!-- 表格数据 :loading="state.auditAgentLoading"-->
          <p-table
            style="height: 30rem; overflow: auto"
            :isSelection="false"
            :isIndex="false"
            :isPagination="false"
            :data="auditAgentData"
            :column="column"
          >
            <template #columnCell="{ column, record }">
              <div v-if="column.prop == 'x'">
                <el-link
                  type="primary"
                  v-if="record.statusDict == '待审核' || record.statusDict == '待处理'"
                  @click="router.push(`${record.pageUrl}?value=${record.receiptNumber}`)"
                  >前往处理</el-link
                >
              </div>
            </template>
          </p-table>
        </el-card>
      </div>
      <div style="flex: 0.5" class="ml20">
        <el-card>
          <template #header>
            <div class="card-header flex-items-center">
              <div class="flex-items-center">
                <svg-icon class="mr10" class-name="xiaoxitongzhi" color="#009fff" size="20px" />
                <span class="title">消息提醒</span>
                <span class="total">({{ msgTotal }})</span>
              </div>
              <div>
                <el-button class="indexBtn" v-show="msgTotal > 0" size="small" text @click="allRead"
                  >全部已读</el-button
                >
                <el-button class="indexBtn" size="small" text @click="useUser.setMsgIsShow(true)">更多</el-button>
              </div>
            </div>
          </template>
          <div class="msgBox" style="height: 30rem; overflow: auto" v-infinite-scroll="loadingChange">
            <div class="message" @click="read(item)" v-for="item in messageData" :key="item.id">
              <div class="top">
                <div class="left">
                  <div class="staus" :class="{ okStaus: item.readMark == '1' }"></div>
                  <div class="name" :class="{ textStaus: item.readMark == '1' }">{{ item.messageTypeDict }}</div>
                </div>
                <div class="right" :class="{ textStaus: item.readMark == '1' }">{{ item.warnTime }}</div>
              </div>
              <div class="content" :class="{ textStaus: item.readMark == '1' }">{{ item.messageContent }}</div>
            </div>
            <div class="loading-1">
              <p v-if="msgLoading">Loading...</p>
            </div>

            <el-empty description="description" v-if="!messageData.length > 0 && !msgLoading">
              <el-button type="primary" @click="getMessage">刷新</el-button>
            </el-empty>
          </div>
        </el-card>
      </div>
    </div>
    <!-- 快捷功能弹窗 -->
    <p-XiaoheDialog
      width="37.5rem"
      :dialogVisible="state.shortcutsShow"
      title="快捷功能"
      @close="state.shortcutsShow = false"
    >
      <template #body>
        <el-transfer
          :disabled="state.disabled"
          :titles="['未选择', '已选择']"
          v-model="idStr"
          filterable
          :filter-method="filterMethod"
          :data="pageList"
          :props="{
            label: 'menuName',
            key: 'menuId'
          }"
          @change="rightPageChange"
        >
        </el-transfer>
        <Btn :loading="state.btnloading" @submit="shortcutsSub" @close="colse" />
      </template>
    </p-XiaoheDialog>
  </div>
</template>
<style scoped lang="scss">
.total {
  color: #009fff;
  margin-left: 5px;
}
.box-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #dcdfe6;
  padding: 20px;
}
.box {
  width: 100%;
  display: flex;
  align-items: center;
  .box-item {
    width: 6rem;
    margin-right: 25px;
    display: flex;
    transition: all 0.5s;
    flex-direction: column;
    align-items: center;
    // border: 1px solid #d4cece;
    padding: 0 10px;
    padding-top: 10px;
    border-radius: 0.625rem;
    cursor: pointer;
    .box-item-title {
      margin-bottom: 20px;
      font-weight: 600;
    }
    &:hover {
      box-shadow: #333333;
      // border: 1px solid #000;
      box-shadow: 0px 5px 2px 5px rgba(57, 57, 57, 0.2);
    }
  }
}

.cup {
  cursor: pointer;
}

.table {
  border: 1px solid #dcdfe6;
  padding: 5px;
  border-top: 0px solid #dcdfe6;
  height: 30rem;
  overflow: auto;
}

.message {
  padding: 15px;
  border: 1px solid #dcdfe6;
  border-top: 0px solid #dcdfe6;
  cursor: pointer;
  &:nth-child(1) {
    border-top: 1px solid #dcdfe6;
  }
  .top,
  .left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #181818;
    line-height: 44px;
    .staus {
      width: 10px;
      height: 10px;
      background: #006cb6;
      border-radius: 50%;
      margin-right: 11px;
    }
    .okStaus {
      background: #999999;
    }
  }
  .right {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
    line-height: 44px;
  }
  .content {
    margin-left: 20px;
    font-size: 14px;
    color: #666674;
  }
  .textStaus {
    color: #a9aaac9e;
  }
}
.card-header {
  display: flex;
  justify-content: space-between;
}

.indexBtn {
  width: 70px;
  height: 28px;
  border-radius: 4px;
  background: #e4f2fb;
  border: 1px solid #e4f2fb;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #006cb6;
}

.title {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 500;
  color: #181818;
}

.box-item-title {
  height: 12px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 44px;
}

::v-deep .el-drawer__body {
  padding: 0 10px !important;
}

::v-deep #el-drawer__title {
  margin-bottom: 10px !important;
}

.msgBox {
  overflow: auto;
}

.loading-1 {
  text-align: center;
  height: 40px;
  p {
    text-align: center;
  }
}
</style>
